<template>
    <a-modal centered title="选择经销商" :width="800" :visible="visible" @ok="handleOk" @cancel="handleCancel"
        cancelText="关闭">
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="渠道">
                            <a-select mode="multiple" v-model="queryParam.channelIdList" style="width: 100%" :maxTagCount="3"
                                :getPopupContainer="node => node.parentNode" placeholder="请选择渠道"
                                :tokenSeparators="[',']">
                                <a-select-option v-for="(channel) in optChannelList" :key="channel.id.toString()"
                                    :value="channel.channelId">
                                    {{ channel.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="经销商">
                            <a-input v-model="queryParam.storeName" placeholder="请输入经销商名称"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="区域">
                            <a-select mode="multiple" show-search v-model="queryParam.officeIdList" style="width: 100%"
                                :getPopupContainer="node => node.parentNode" placeholder="请选择区域" :maxTagCount="2" :filter-option="filterOption"
                                :tokenSeparators="[',']">
                                <a-select-option v-for="(item) in areaList" :key="item.officeId.toString()"
                                    :value="item.officeId">
                                    {{ item.officeName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    
                    <a-col :span="4">
                        <span  class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div style="margin-top: 10px;">
            <a-table size="middle" bordered rowKey="storeId" :columns="columns" :dataSource="data" :pagination="false"
                :loading="loading" :scroll="{ y: 340 }"
                :rowSelection="rowSelection">
            </a-table>
        </div>
    </a-modal>
</template>
<!-- 按渠道选择经销商 -->
<script>
import { getAction } from '@/api/manage'


export default {
    props:['sourceData'],//传递的已选择数据
    name: 'SysMsgNoticeChannelModal',
    data() {
        return {
            optChannelList: [],
            names: [],
            visible: false,
            brandCategory: '',
            placement: 'right',
            description: '',
            // 查询条件
            queryParam: {
                channelIdList: [],
                officeIdList:[],
                storeName:''
            },
            // 表头
            columns: [
                {
                    title: '渠道编码',
                    align: 'center',
                    dataIndex: 'channelId',
                    width: 80
                },
                {
                    title: '渠道名称',
                    align: 'center',
                    dataIndex: 'channelName',
                    width: 100
                },
                {
                    title: '经销商编号',
                    align: 'center',
                    dataIndex: 'storeCode',
                    width: 150
                },
                {
                    title: '经销商名称',
                    align: 'center',
                    dataIndex: 'storeName'
                },
            ],
            //数据集
            data: [],
            loading: false,
            selectedRowKeys: [],
            selectRows:[],//选择的数据
            areaList:[],
            url: {
                list: '/system/sysUserStore/queryStore',
                channelListUrl: 'stm/stmChannelInfo/list',
                areaListUrl:'/stm/stmStoreOffice/list',
            }
        }
    },
    created() {
        this.getChannelList();
        this.getAreaList();
    },
    computed:{
        initSelectIds(){
            return JSON.parse(JSON.stringify(this.sourceData)).map(x=>x.storeId)
        },
        rowSelection(){
            return{
                selectedRowKeys:this.selectedRowKeys,
                onSelectAll:this.onSelectAll,
                onSelect:this.onSelect,
                onChange: this.onSelectChange,
                getCheckboxProps: this.getCheckboxProps
            }
        }
    },
    methods: {
        getCheckboxProps(record){
            return{
                props: {
                    disabled:!!this.initSelectIds.includes(record.storeId),
                    name:record.name
                },
            }
        },
        getChannelList() {
            let param = {};
            param.status = 1;
            param.pageSize = 100;
            getAction(this.url.channelListUrl, param).then(res => {
                if (res.success) {
                    const {records} = res.result;
                    this.optChannelList = records;
                    this.optChannelList.unshift({ id: "", name: "请选择渠道" })
                    // this.queryParam.channelIdList = records[1]?[records[1].channelId]:[];
                    // this.loadData();
                } else {
                    console.log(res.message)
                }
            })
        },
        getAreaList() {
            let param = {
                pageSize:100,
                pageNo:1,
                // officeName:''
            };
            getAction(this.url.areaListUrl, param).then(res => {
                if (res.success) {
                    const {records} = res.result;
                    this.areaList = records;
                    this.areaList.unshift({ officeId: "", officeName: "请选择区域" })
                } else {
                    console.log(res.message)
                }
            })
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        searchQuery() {
            this.loadData(1);
        },
        searchReset() {
            this.queryParam = {
                storeName:''
            };
            // this.loadData(1);
        },
        handleCancel() {
            this.visible = false;
        },
        handleOk() {
            // console.log(this.selectRows);
            this.$emit("selectFinished", this.selectRows);
            this.visible = false;
        },
        // 打开弹窗，无搜索选项开始搜索
        open() {
            this.selectRows = JSON.parse(JSON.stringify(this.sourceData))
            this.selectedRowKeys = JSON.parse(JSON.stringify(this.sourceData)).map(x=>x.storeId);
            this.visible = true;
            if(this.queryParam.channelIdList.length || this.queryParam.officeIdList.length){
                this.loadData(1);
            }else{
                this.data = []
            }
        },
        clear(){
            this.queryParam.channelIdList = []
            this.queryParam.officeIdList = []
            this.queryParam.storeName = ''
        },
        add() {
            // console.log('add');
            // this.data = [];
            // this.selectRows = [];
            // this.selectedRowKeys = [];
            // this.visible = true;
            // this.loadData(1);
        },
        //加载数据 若传入参数1则加载第一页的内容
        loadData(arg) {
            if (arg === 1) {
                // 重新搜索
                // this.queryParam.channelIdList = [];
            }
            const channelIds = this.queryParam.channelIdList ? this.queryParam.channelIdList.join(',') : ''
            const officeIds= this.queryParam.officeIdList? this.queryParam.officeIdList.join(',') : ''
            getAction(this.url.list, {
                channelIds,
                officeIds,
                storeName:this.queryParam.storeName
            }).then((res) => {
                if (res.success) {
                    this.data = res.result;
                }
            })
        },
        onSelectAll(selected, selectedRows, changeRows) {
            if (selected === true) {
                for (var a = 0; a < changeRows.length; a++) {
                    this.selectRows.push(changeRows[a]);
                }
            } else {
                for (var b = 0; b < changeRows.length; b++) {
                    this.selectRows.splice(this.selectRows.indexOf(changeRows[b]), 1);
                }
            }
            // console.log(selected, selectedRows, changeRows);
        },
        onSelect(record, selected) {
            if (selected === true) {
                this.selectRows.push(record);
            } else {
                var index = this.selectRows.indexOf(record);
                if (index >= 0) {
                    this.selectRows.splice(this.selectRows.indexOf(record), 1);
                }
            }
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        onClearSelected() {
            this.selectedRowKeys = [];
        },
        handleDelete: function (record) {
            this.selectRows.splice(this.selectRows.indexOf(record), 1);
        },

    }
}
</script>
<style lang="less" scoped>
.ant-card-body .table-operator {
    margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
}

.anty-row-operator button {
    margin: 0 5px
}

.ant-btn-danger {
    background-color: #ffffff
}

.ant-modal-cust-warp {
    height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
}
</style>